<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link href="../../element/index.css" rel="stylesheet" />
		<script src="../../js/vue.js"></script>
		<script src="../../element/index.js"></script>
		<script src="../../js/axios.js"></script>
		<script src="../../js/gsaucommon.js"></script>
		<style>
			* {
				margin: 0px;
				padding: 0px;
			}

			body {
				height: 100%;
			}

			html {
				height: 100%;
			}

			/* 大盒子 */
			#addtableone {

				width: 90%;
				/* 		box-shadow: 20px; */
				background-color: white;
				margin: 0 auto;
				box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
				margin-top: 20px;
			}

			#header {
				top: 0px;
				background-color: white;
				position: sticky;
				z-index: 5;
			}

			#header #left {
				height: 80px;
				line-height: 80px;
				text-indent: 12px;

			}

			#header #right {
				height: 80px;

				line-height: 80px;
				/* font-size: 32px;
				font-weight: bold; */
				text-align: right;

			}

			#hr1 {

				/* width:98%;
				margin: 0 auto; */
				color: whitesmoke;
				margin-bottom: 30px;

			}
		</style>
	</head>
	<body>
		<div id="addtableone">

			<el-row id="header">
				<el-col :span="12">
					<div class="grid-content bg-purple" id="left">
						<h3>教改项目管理</h3>
					</div>
				</el-col>
				<el-col :span="12">
					<div class="grid-content bg-purple-light" id="right" style=" padding-right: 80px;">
						<el-button type="primary" @click="fanhui">
							返回
						</el-button>
					</div>
				</el-col>
				<hr id="hr1" />
			</el-row>

			<el-row style="padding-left: 40px;">

				<el-form :model="form" :rules="rules" ref="ruleform" label-width="80px" class="demo-ruleForm" name>

					<el-row>
						<el-col :span="24">
							<el-form-item label="项目名称" style="width: 800px;" prop="projectName">
								<el-input v-model="form.projectName"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="立项单位" style="width: 300px;" prop="lixiangDanWei">
								<el-input v-model="form.lixiangDanWei"></el-input>
							</el-form-item>
						</el-col>
					</el-row>

					<el-form-item label="主持人" style="width: 200px" prop="zhuChiRen">
						<el-input v-model="form.zhuChiRen"></el-input>
					</el-form-item>

					<el-row>
						<el-col :span="8">
							<el-form-item label="立项时间" style="width: 300px" prop="lixiangDate">
								<el-date-picker type="date" placeholder="选择日期" v-model="form.lixiangDate"
									format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd" style="width: 100%;">
								</el-date-picker>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="总人数" style="width:200px" prop="zongRenShu">
								<el-input v-model.number="form.zongRenShu"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="本人排名" style="width:200px" prop="meSort">
								<el-input v-model.number="form.meSort"></el-input>
							</el-form-item>

						</el-col>
					</el-row>
					<el-row>
						<el-col :span="8">
							<el-form-item label="获批经费(万元)" style="width:200px" prop="huoPiJingFei">
								<el-input v-model.number="form.huoPiJingFei"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="到账经费(万元)" style="width:200px" prop="daoZhangJingFei">
								<el-input v-model.number="form.daoZhangJingFei"></el-input>
							</el-form-item>

						</el-col>
					</el-row>

					<el-form-item label="证明材料" style="width: 50%;">
						<el-upload class="upload-demo" drag :action="url+'jiaogai/upload'"
							:on-preview="handlePreview" :on-remove="handleRemove" :before-remove="beforeRemove"
							:on-success="uploadSuccess" :on-error="uploadError" :before-upload="beforeUpload"
							:headers="config.headers"
							:on-preview="show" :file-list="fileList">
							<i class="el-icon-upload"></i>
							<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
							<div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
						</el-upload>
					</el-form-item>
					<el-form-item label="备注">
						<el-input type="textarea" v-model="form.memo" style="width: 50%;"></el-input>
					</el-form-item>

					<!--  提交栏 -->
					<el-form-item>
						<el-button type="primary" @click="submitForm('ruleform')">添加信息</el-button>
						<el-button @click="resetForm('ruleform')">重置</el-button>
					</el-form-item>

				</el-form>
			</el-row>




		</div>
		<script type="text/javascript">
			new Vue({
				el: '#addtableone',
				data: {
					form: {
						zhuChiRen: '',
						projectName: '',
						lixiangDanWei: '',
						lixiangDate: '',
						zongRenShu: '',
						meSort: '',
						huoPiJingFei: '',
						daoZhangJingFei: '',
						memo: '',
						fileList: [

						],
					},
					loading: false,
					lastuploadfile: '',
					fileMapprings: [],
					fileList: [],
					config:{
						headers: {
							"token": ""
						}
					},
					url:'',
					rules: {
						zhuChiRen: [{
								required: true,
								message: '请输入填报人',
								trigger: 'blur'
							},
							{
								min: 1,
								max: 20,
								message: '长度在 1 到 20 个字符',
								trigger: 'blur'
							}
						],
						projectName: [{
							required: true,
							min: 1,
							message: '长度至少1的字符',
							trigger: 'blur'
						}],
						lixiangDanWei: [{
							required: true,
							min: 1,
							message: '长度至少1的字符',
							trigger: 'blur'
						}],
						lixiangDate: [{
							required: true,
							message: '请选择日期',
							trigger: 'change'
						}],
						zongRenShu: [{
								required: false
							},
							{
								type: 'number',
								message: '人数必须为数字值',
								trigger: 'blur'
							},
						],
						meSort: [{
							required: true,
							type: 'number',
							message: '排名必须为数字值',
							trigger: 'blur'
						}, ],
						huoPiJingFei: [{
								required: false
							},
							{
								type: 'number',
								message: '金额必须为数字值',
								trigger: 'blur'
							},
						],
						daoZhangJingFei: [{
								required: false
							},
							{
								type: 'number',
								message: '金额必须为数字值',
								trigger: 'blur'
							},
						],

					},

				},
				//生命周期函数
				created() {
					this.config.headers.token = sessionStorage.getItem("token")
					this.flag = localStorage.getItem("flag")
					this.url=window.gsau
				},
				methods: {
					submitForm(ruleform) {
						this.$refs[ruleform].validate((valid) => {
							if (valid) {
								axios.post(window.gsau + "jiaogai/save/", this.form,this.config).then((res) => {
									console.log(res)
									if (res.data.code === 10010) {
										this.$alert('信息上报成功，请耐心等待审核', '添加成功', {
											confirmButtonText: '确定',
											callback: action => {
												this.$message({
													type: 'info',
													message: `添加成功`
												});
											}
										});
									} else {
										this.$alert('信息上报失败，请检查网络环境后重新添加', '添加失败', {
											confirmButtonText: '确定',
											callback: action => {
												this.$message({
													type: 'danger',
													message: `添加失败`
												});
											}
										});
									}
									console.log("****************************************")
									console.log(this.fileList)
									console.log(this.form.fileList)
								})
							} else {
								this.$alert('信息上报失败，请检查信息是否填报完整', '添加失败', {
									confirmButtonText: '确定',
									callback: action => {
										this.$message({
											type: 'danger',
											message: `添加失败`
										});
									}
								});
								return false;
							}
						});
					},
					show: function(file) {
						console.log(file)
					},
					resetForm(ruleform) {
						this.$refs[ruleform].resetFields();
					},
					handleRemove(file, fileList) {
						console.log("handleRemove")
					},
					handlePreview(file) {
						// window.location.href("'http://localhost:8080/files/kql/'+file.response.newfilename")
						console.log("handlePreview")
						console.log(file);
					},
					beforeUpload(file) {
						this.loading = true
						console.log("beforeUpload")
						//校验文件类型，文件大小
						console.log(file)
					},
					beforeRemove(file, fileList) {
						console.log("beforeRemove")
						//删除提交的表单表中要移除的文件
						console.log(file)
						let index = '';
						for (let i = 0; i < this.fileList.length; i++) {
							if (this.fileList[i].name == file.name) {
								index = file.name
								break;
							}
						}
						for (let i = 0; i < this.fileList.length; i++) {
							if (this.fileList[i].name == file.name) {
								this.fileList.splice(i, 1)
								break;
							}
						}
						for (let i = 0; i < this.form.fileList.length; i++) {
							if (this.form.fileList[i].name == file.name) {
								this.form.fileList.splice(i, 1)
								break;
							}
						}

					},
					uploadSuccess(response, file, fileList) {

						if (response.code == 10010) {
							// this.form.fileList.push(response.data.newfilename)
							this.lastuploadfile = response.data.newfilename
							console.log("****************************************")
							console.log(response)
							let m = {
								name: '',
								newfilename: ''
							}
							m.newfilename = response.data.newfilename
							m.name = response.data.oldfilename
							// this.fileMapprings.push(m)
							this.fileList.push(m)
							for (let i = 0; i < this.fileList.length; i++) {
								this.form.fileList[i] = this.fileList[i]
							}
							console.log("========================")
							console.log(this.fileList)
							console.log(this.form.fileList)
							console.log("========================")
							this.$message.success(file.name + "文件上传成功")
						} else {
							this.$message.error(response.data + "：上传失败，请重新上传");
							//删除上传列表中，失败的文件
							let index = 0;
							for (const i in fileList) {
								if (fileList[i] == file) {
									index = i;
									break;
								}
							}
							//移出当前文件对象
							fileList.splice(index, 1);
							this.$refs.uploadFile.clearFiles();
						}
						console.log(response.code)
						console.log(response)
						console.log(fileList)
						this.loading = false
					},
					uploadError(err, file, fileList) {
						console.log(err)
						console.log(file)
						console.log(fileList)

						this.$message.error(file.name + "上传失败，请重新上传");
						//删除上传列表中，失败的文件
						let index = 0;
						for (const i in fileList) {
							if (fileList[i] == file) {
								index = i;
								break;
							}
						}
						//移出当前文件对象
						fileList.splice(index, 1);
						// this.$refs.uploadFile.clearFiles();
						this.loading = false
					},
					fanhui: function() {
						window.location.href = "list.html"
					},
				},

			})
		</script>

	</body>

</html>
